<template>
  <div class="table-box">
    <ProTable ref="proTableBox" :columns="dataGrid.columns" :request-api="getUserList">
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>

    <!-- 用户注册 -->
    <DialogForm
      :options="addForm.options"
      :title="addForm.title"
      :form-attrs="addForm.formAttrs"
      v-model:visible="addForm.visible"
      @get-model="(form: User.ResUserList) => (addForm.form = form)"
      @submit-form="saveAddForm"
    ></DialogForm>

    <!-- 修改密码 -->

    <DialogForm
      :width="changePwdForm.width"
      :options="changePwdForm.options"
      :title="changePwdForm.title"
      :form-attrs="changePwdForm.formAttrs"
      v-model:visible="changePwdForm.visible"
      @get-model="(form: User.ResUserList) => (changePwdForm.form = form)"
      @submit-form="savePwdForm"
    ></DialogForm>
  </div>
</template>

<script setup lang="ts" name="userManagement">
import { ProTableInstance } from '@/components/ProTable/interface';
import { User } from '@/api/interface';

import { getUserList } from '@/api/modules/auth/user';

import { useDataGrid } from './mixins/dataGrid';

const proTableBox = ref<ProTableInstance>();

const { dataGrid, changePwdForm, addForm, savePwdForm, saveAddForm } = useDataGrid(proTableBox);
</script>
